<template>
  <div>
    <h1>新增商品</h1>
    <el-form label-width="100px" class="demo-ruleForm" style="width:50%;margin:0 auto">
      <el-form-item label="商品名称">
        <el-input type="text" v-model="goods.name"></el-input>
      </el-form-item>
      <el-form-item prop="username" label="商品种类">
        <el-select placeholder="商品种类" collapse-tags v-model="msg" style="width:100%;">
          <el-option v-for="item in classifys" :key="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="username" label="适用宠物">
        <el-select placeholder="适用宠物" multiple collapse-tags v-model="msgs" style="width:100%;">
          <el-option v-for="item in pets" :key="item" :value="item"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="价格">
        <el-input v-model="goods.price"></el-input>
      </el-form-item>
      <el-form-item label="重量">
        <el-input v-model="goods.weight"></el-input>
      </el-form-item>
      <el-form-item label="生产日期">
        <el-input v-model="goods.production"></el-input>
      </el-form-item>
      <el-form-item label="保质期">
        <el-input v-model="goods.shelfLife"></el-input>
      </el-form-item>
      <el-form-item label="产地">
        <el-input v-model="goods.producer"></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input v-model="goods.desc"></el-input>
      </el-form-item>
      <el-form-item prop="username" label="所属门店">
        <el-select placeholder="所属门店" collapse-tags v-model="value" style="width:100%;">
          <el-option v-for="item in shops" :key="item._id" :value="item._id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-upload
        class="upload-demo"
        :before-upload="beforeupload"
        action="https://jsonplaceholder.typicode.com/posts/"
        style="margin-left:80px;"
      >
        <i class="el-icon-upload"></i>
        <!-- <img :src="src" alt style="width:380px;height:160px" /> -->
        <div class="el-upload__text">点击上传</div>
      </el-upload>
      <div style="width:60%;margin-left:180px;">
         <img :src="src" alt style="width:60%;" />
      </div>
      <el-form-item>
        <el-button type="primary" @click="addgoods">确认新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("goods");
export default {
  data() {
    return {
      goods: {
        name: "",
        classify: "",
        pet: "",
        price: "",
        weight: "2kg",
        production: "2019-7-25",
        shelfLife: "5个月",
        producer: "合肥",
        images: [],
        desc: "",
        shopId: "",
        adminId: ""
      },
      form: {
        //form里面的参数
        name: ""
      },
      param: "", //表单要提交的参数
      src: "",
      msg: "",
      msgs: "",
      shops: [],
      value: ""
    };
  },
  computed: {
    ...mapState(["classifys", "pets"])
  },
  mounted() {
    const data = JSON.parse(localStorage.getItem("user"));
    axios.get("/shops").then(res => {
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].adminId._id === data._id && res.data[i].status == 2) {
          this.shops.push(res.data[i]);
        }
      }
    });
  },
  methods: {
    addgoods() {
      this.goods.shopId = this.value;
      this.goods.classify = this.msg;
      this.goods.pet = this.msgs[0];
      const data = JSON.parse(localStorage.getItem("user"));
      this.goods.adminId = data._id;
      const {
        name,
        classify,
        pet,
        price,
        weight,
        production,
        shelfLife,
        producer,
        images,
        desc,
        adminId,
        shopId
      } = this.goods;

      var names = this.form.name;
      //下面append的东西就会到form表单数据的fields中；
      this.param.append("message", names);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      //然后通过下面的方式把内容通过axios来传到后台
      //下面的this.$reqs 是在主js中通过Vue.prototype.$reqs = axios 来把axios赋给它;
      axios.post("/goods/addImages", this.param, config).then(function(result) {
        images.push("http://localhost:3002" + result.data.data.url);
        console.log(images);
        axios
          .post("/goods/addGoods", {
            name,
            classify,
            pet,
            price,
            weight,
            production,
            shelfLife,
            producer,
            images,
            desc,
            shopId,
            adminId
          })
          .then(res => {
            if (res.data) {
              alert("新增成功")
              images.length=0
            }
          });
      });
    },
    beforeRemove(file, fileList) {
      console.log(file, fileList);
      //return this.$confirm(`确定移除 ${ file.name }？`);
    },
    //阻止upload的自己上传，进行再操作
    beforeupload(file) {
      console.log(file);

      //创建临时的路径来展示图片
      var windowURL = window.URL || window.webkitURL;

      this.src = windowURL.createObjectURL(file);
      console.log(this.src);

      //重新写一个表单上传的方法
      this.param = new FormData();
      this.param.append("file", file, file.name);
      return false;
    }
  }
};
</script>

<style>

</style>